<template>
  <ul class="mo-paging">
    <!-- prev -->
    <li
      class="paging-item paging-item--prev"
      :class="{'paging-item--disabled' : index === 1}"
      @click="prev"
    >
      <i class="iconfont icon-shangyiyehoutuifanhui"></i>
    </li>
    <li class="paging-item paging-item--prev" @click="go(1)" v-if="showPrevMore">1</li>
    <li class="paging-item paging-item--prev" v-if="showPrevMore">...</li>

    <li
      class="paging-item"
      v-for="pager in pagers"
      :key="pager"
      @click="go(pager)"
      :class="{'paging-item--current' : index == pager}"
    >{{ pager }}</li>

    <li class="paging-item paging-item--more" v-if="showNextMore">...</li>
    <!-- next -->
    <li class="paging-item paging-item--next" @click="next">
      <i class="iconfont icon-xiayiyeqianjinchakangengduo"></i>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      index: this.pageIndex, //当前页码
      limit: this.pageSize, //每页显示条数
      showPrevMore: false,
      showNextMore: false
    };
  },
  //通过props来接受从父组件传递过来的值
  props: {
    //页面中的可见页码，其他的以...替代, 必须是奇数
    perPages: {
      type: Number,
      default: 7
    },

    //当前页码
    pageIndex: {
      type: Number,
      default: 1
    },

    //每页显示条数
    pageSize: {
      type: Number,
      default: 40
    }
  },
  methods: {
    prev() {
      if (this.index > 1) {
        this.go(this.index - 1);
      }
    },
    next() {
      this.go(this.index + 1);
    },
    go(page) {
      if (this.index !== page) {
        this.index = page;
        //父组件通过change方法来接受当前的页码
        this.$emit("change", this.index);
      }
    }
  },
  computed: {
    //计算页码，当count等变化时自动计算
    pagers() {
      var that = this;
      const array = [];
      const perPages = this.perPages;
      const pageCount = this.pages;
      let current = this.index;
      const _offset = (perPages - 1) / 2;

      const offset = {
        start: current - _offset,
        end: current + _offset
      };

      //-1, 3
      if (offset.start < 1) {
        offset.end = offset.end + (1 - offset.start);
        offset.start = 1;
      }
      if (offset.end > pageCount) {
        offset.start = offset.start - (offset.end - pageCount);
        offset.end = pageCount;
      }
      if (offset.start < 1) offset.start = 1;
      let prevBtn = function() {
        if (offset.start > 1) {
          return true;
        } else {
          return false;
        }
      };

      let nextBtn = function() {
        if (offset.end < pageCount) {
          return true;
        } else {
          return false;
        }
      };

      that.showPrevMore = prevBtn();
      that.showNextMore = nextBtn();

      for (let i = offset.start; i <= offset.end; i++) {
        array.push(i);
      }

      return array;
    }
  },
  watch: {
    pageIndex(val) {
      this.index = val || 1;
    },
    pageSize(val) {
      this.limit = val || 10;
    }
  }
};
</script>


<style scoped>
.mo-paging {
  display: inline-block;
  padding: 0;
  margin: 1rem 10px;
  font-size: 0;
  list-style: none;
  user-select: none;
}
.mo-paging .paging-item {
  display: inline;
  font-size: 14px;
  position: relative;
  padding: 6px 12px;
  line-height: 1.42857143;
  text-decoration: none;
  border: 1px solid #ddd;
  background-color: #fff;
  margin-left: -1px;
  cursor: pointer;
  color: #778087;
}
.mo-paging .paging-item:first-child {
  margin-left: 0;
}
.mo-paging .paging-item:hover {
  background-color: #f2f2f2;
  color: #80bd01;
}
.mo-paging .paging-item .paging-item--disabled,
.mo-paging .paging-item.paging-item--more {
  background-color: #fff;
  color: #505050;
}
.mo-paging .paging-item.paging-item--disabled {
  cursor: not-allowed;
  opacity: 0.75;
}
.mo-paging .paging-item.paging-item--more,
.mo-paging .paging-item.paging-item--current {
  cursor: default;
}
.mo-paging .paging-item.paging-item--current {
  color: #80bd01;
  position: relative;
  z-index: 1;
}
</style>
